<template>
  <div class="repertory">
    <div class="ui_left_mask" :class="hiddenUI ? 'hiddenLeft' : ''">
      <div class="ui_left">
        <div class="nape_content" style="margin-top: 0;">
          <div class="content_title">
            <span>库存统计</span>
          </div>
          <div class="center_content">
            <charts-chen container="leftToplineCharts" width="100%" height="100%" :options="leftToplineCharts" />
          </div>
        </div>
        <div class="nape_content">
          <div class="content_title">
            <span>库存资金</span>
          </div>
          <div class="center_content">
            <charts-chen container="leftTwoMoreCharts" width="100%" height="100%" :options="leftTwoMoreCharts" />
          </div>
        </div>
        <div class="nape_content">
          <div class="content_title">
            <span>内销出入库</span>
          </div>
          <div class="center_content">
            <div class="invest_box">
              <div class="invest_list_con" v-for="(item, index) in lefThreePieCharts" :key="index">
                <div class="name">{{ item.name }}</div>
                <div class="progress">
                  <div :style="{ width: (item.value / item.maxValue) * 100 + '%', background: item.color }"></div>
                </div>
                <div class="value">
                  <span :style="'color:' + item.color">{{ item.value }}</span>个
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="nape_content">
          <div class="content_title">
            <span>外销出入库</span>
          </div>
          <div class="center_content">
            <charts-chen container="lefFourPieCharts" width="100%" height="100%" :options="lefFourPieCharts" />
          </div>
        </div>
      </div>
    </div>
    <div class="ui_right_mask" :class="hiddenUI ? 'hiddenRight' : ''">
      <div class="ui_right">
        <div class="nape_content" style="margin-top: 0;">
          <div class="content_title">
            <span>原材料仓库</span>
          </div>
          <div class="center_content">
            <div class="table_box">
              <div class="tableHead">
                <span style="width: 12%">序号</span>
                <span>材料名称</span>
                <span>数量</span>
                <span>库存状态</span>
              </div>
              <div class="tableContent" v-if="rightTopTable.list.length != 0">
                <div class="tableItem" v-for="(item, index) in rightTopTable.list"
                  :style="{ animationDelay: index * 0.05 + 's' }" :key="index"
                  @click="webToUeMessige('原材料仓库', item.name)">
                  <div class="textContent" style="width: 12%">
                    <span>{{ index + 1 }}</span>
                  </div>
                  <div class="textContent">
                    <span class="scrollText">{{ item.name }}</span>
                  </div>
                  <div class="textContent">
                    <span>{{ item.num }}</span>
                  </div>
                  <div class="textContent">
                    <span :style="item.num < 200 ? 'color: #e66151' : 'color:#00d68a;'">
                      {{ item.num < 200 ? '过低' : '充足' }} </span>
                  </div>
                </div>
              </div>
              <div class="tableContent" v-else-if="!rightTopTable.loading">
                <div class="noData"></div>
              </div>
              <div class="tableContent" v-if="rightTopTable.loading">
                <a-spin />
              </div>
            </div>
          </div>
        </div>
        <div class="nape_content">
          <div class="content_title">
            <span>半成品仓库</span>
          </div>
          <div class="center_content">
            <div class="table_box">
              <div class="tableHead">
                <span style="width: 12%">序号</span>
                <span>材料名称</span>
                <span>数量</span>
                <span>库存状态</span>
              </div>
              <div class="tableContent" v-if="rightTwoTable.list.length != 0">
                <div class="tableItem" v-for="(item, index) in rightTwoTable.list"
                  :style="{ animationDelay: index * 0.05 + 's' }" :key="index"
                  @click="webToUeMessige('半成品仓库', item.name)">
                  <div class="textContent" style="width: 12%">
                    <span>{{ index + 1 }}</span>
                  </div>
                  <div class="textContent">
                    <span class="scrollText">{{ item.name }}</span>
                  </div>
                  <div class="textContent">
                    <span>{{ item.num }}</span>
                  </div>
                  <div class="textContent">
                    <span :style="item.num < 200 ? 'color: #e66151' : 'color:#00d68a;'">
                      {{ item.num < 200 ? '过低' : '充足' }} </span>
                  </div>
                </div>
              </div>
              <div class="tableContent" v-else-if="!rightTwoTable.loading">
                <div class="noData"></div>
              </div>
              <div class="tableContent" v-if="rightTwoTable.loading">
                <a-spin />
              </div>
            </div>
          </div>
        </div>
        <div class="nape_content">
          <div class="content_title">
            <span>成品仓库</span>
          </div>
          <div class="center_content">
            <div class="table_box">
              <div class="tableHead">
                <span style="width: 12%">序号</span>
                <span>成品名称</span>
                <span>数量</span>
                <span>库存状态</span>
              </div>
              <div class="tableContent" v-if="rightThreeTable.list.length != 0">
                <div class="tableItem" v-for="(item, index) in rightThreeTable.list"
                  :style="{ animationDelay: index * 0.05 + 's' }" :key="index"
                  @click="webToUeMessige('成品仓库', item.name)">
                  <div class="textContent" style="width: 12%">
                    <span>{{ index + 1 }}</span>
                  </div>
                  <div class="textContent">
                    <span class="scrollText">{{ item.name }}</span>
                  </div>
                  <div class="textContent">
                    <span>{{ item.num }}</span>
                  </div>
                  <div class="textContent">
                    <span :style="item.num < 200 ? 'color: #e66151' : 'color:#00d68a;'">
                      {{ item.num < 200 ? '过低' : '充足' }} </span>
                  </div>
                </div>
              </div>
              <div class="tableContent" v-else-if="!rightThreeTable.loading">
                <div class="noData"></div>
              </div>
              <div class="tableContent" v-if="rightThreeTable.loading">
                <a-spin />
              </div>
            </div>
          </div>
        </div>
        <div class="nape_content">
          <div class="content_title">
            <span>热卖成品</span>
          </div>
          <div class="center_content">
            <charts-chen container="rightMoreChart" width="100%" height="100%" :options="rightMoreChart" />
          </div>
        </div>
        <div class="nape_content">
          <div class="content_title">
            <span>成品金额排行</span>
          </div>
          <div class="center_content">
            <div class="table_box">
              <div class="tableHead">
                <span style="width: 12%">序号</span>
                <span>成品名称</span>
                <span>数量</span>
                <span>库存状态</span>
              </div>
              <div class="tableContent" v-if="rightFourTable.list.length != 0">
                <div class="tableItem" v-for="(item, index) in rightFourTable.list"
                  :style="{ animationDelay: index * 0.05 + 's' }" :key="index">
                  <div class="textContent" style="width: 12%">
                    <span>{{ index + 1 }}</span>
                  </div>
                  <div class="textContent">
                    <span class="scrollText">{{ item.name }}</span>
                  </div>
                  <div class="textContent">
                    <span>{{ item.num }}</span>
                  </div>
                  <div class="textContent">
                    <span :style="item.num < 200 ? 'color: #e66151' : 'color:#00d68a;'">
                      {{ item.num < 200 ? '过低' : '充足' }} </span>
                  </div>
                </div>
              </div>
              <div class="tableContent" v-else-if="!rightFourTable.loading">
                <div class="noData"></div>
              </div>
              <div class="tableContent" v-if="rightFourTable.loading">
                <a-spin />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, onUnmounted, nextTick, watch } from 'vue';
import * as echarts from "echarts";
import { delay, randomColor, webToUeMessige } from '../../utils';

export default defineComponent({
  props: {
    showUI: {
      type: Boolean
    }
  },
  components: {},
  setup (props) {
    const data = reactive({
      hiddenUI: false,
      leftToplineCharts: {
        title: {
          text: "",
          subtext: "库存总量: 693吨",
          textStyle: {
            color: "#fff",
            fontSize: 16
          },
          subtextStyle: {
            color: "#fff",
            fontSize: 16
          },
          x: "center",
          top: 0
        },
        grid: {
          left: 10,
          bottom: 30,
          top: 50,
          right: 10
        },
        tooltip: {
          show: true,
          backgroundColor: "rgba(24, 157, 247, 0.6)",
          textStyle: {
            color: "white",
          },
        },
        xAxis: {
          data: ["喷花总量", "礼花总量", "火箭总量"],
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#beceff',
              fontSize: 16,
            },
            margin: 15, // 刻度标签与轴线之间的距离。
          }
        },
        yAxis: {
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        series: [
          {
            name: "顶部圆",
            tooltip: {
              show: false
            },
            type: "pictorialBar",
            symbolSize: [30, 15],
            symbolOffset: [0, -10],
            z: 10,
            data: (() => {
              const list = [
                { color: 'rgba(0, 230, 169, 1)', value: 390 },
                { color: 'rgba(110, 231, 250, 1)', value: 203 },
                { color: 'rgba(182, 249, 113, 1)', value: 100 }
              ];
              return list.map(item => {
                return {
                  value: item.value,
                  symbolPosition: "end",
                  itemStyle: {
                    normal: {
                      color: item.color
                    }
                  }
                };
              });
            })()
          },
          {
            name: "底部圆",
            tooltip: {
              show: false
            },
            type: "pictorialBar",
            symbolSize: [60, 20],
            symbolOffset: [0, 10],
            z: 12,
            data: (() => {
              const list = [390, 203, 100];
              return list.map(item => {
                return {
                  value: item,
                  itemStyle: {
                    normal: {
                      color: "transparent",
                      borderColor: "#43bafe",
                      borderWidth: 5
                    }
                  }
                };
              });
            })()
          },
          {
            type: "bar",
            barWidth: 30,
            data: (() => {
              const list = [
                { color1: 'rgba(0, 230, 169, 1)', color2: 'rgba(0, 230, 169, 0.3)', value: 390 },
                { color1: 'rgba(110, 231, 250, 1)', color2: 'rgba(110, 231, 250, 0.3)', value: 203 },
                { color1: 'rgba(182, 249, 113, 1)', color2: 'rgba(182, 249, 113, 0.3)', value: 100 },
              ];
              return list.map(item => {
                return {
                  value: item.value,
                  label: {
                    normal: {
                      show: true,
                      position: "top",
                      distance: 10,
                      textStyle: {
                        color: item.color1,
                        fontSize: 20
                      }
                    }
                  },
                  itemStyle: {
                    normal: {
                      color: {
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                          {
                            offset: 0,
                            color: item.color2
                          },
                          {
                            offset: 1,
                            color: item.color1
                          }
                        ]
                      }
                    }
                  }
                };
              });
            })()
          }
        ]
      },
      leftTwoMoreCharts: {
        title: {
          text: '库存总资金:1300',
          top: 'top',
          left: 'center',
          textStyle: {
            fontSize: 16,
            color: "#FFFFFF"
          }
        },
        tooltip: {
          show: true,
          backgroundColor: "rgba(24, 157, 247, 0.6)",
          textStyle: {
            color: "white",
          },
        },
        grid: {
          left: "3%",
          right: "3%",
          bottom: "0%",
          top: "21%",
          containLabel: true
        },
        xAxis: {
          data: ['喷花占用', '礼花占用', '火箭占用'],
          triggerEvent: true,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            interval: 0,
            textStyle: {
              color: "#FFFFFF"
            }
          }
        },
        yAxis: {
          triggerEvent: true,
          nameTextStyle: {
            fontSize: 12,
            color: '#FFFFFF'
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255,255,255,.1)'
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,.1)'
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "rgb(148,159,167)",
              fontSize: 12
            }
          }
        },
        series: (() => {
          const list = [
            { color1: 'rgba(23, 136, 240, 1)', color2: 'rgba(23, 136, 240, 0.3)', value: 560 },
            { color1: 'rgba(16, 233, 235, 1)', color2: 'rgba(16, 233, 235, 0.3)', value: 390 },
            { color1: 'rgba(182, 249, 113, 1)', color2: 'rgba(182, 249, 113, 0.3)', value: 380 },
          ];
          return list.map((item, index) => {
            const data = new Array(index).fill(null);
            return {
              barMinHeight: 10,
              type: "pictorialBar",
              barCategoryGap: "60%",
              symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: item.color1
                  },
                  {
                    offset: 1,
                    color: item.color2
                  }
                  ])
                }
              },
              label: {
                normal: {
                  show: true,
                  position: "top",
                  textStyle: {
                    color: "#fff",
                    fontSize: 12
                  }
                }
              },
              data: [...data, item.value]
            };
          });
        })()
      },
      lefThreePieCharts: [
        {
          name: '喷花',
          value: 1688,
          color: 'rgb(110, 231, 250)',
          maxValue: 5000
        },
        {
          name: '火箭',
          value: 1200,
          color: 'rgb(4, 210, 169)',
          maxValue: 5000
        },
        {
          name: '礼花',
          value: 4800,
          color: 'rgb(254, 184, 52)',
          maxValue: 5000
        },
      ],
      lefFourPieCharts: {
        tooltip: {
          show: true,
          backgroundColor: "rgba(24, 157, 247, 0.6)",
          textStyle: {
            color: "white",
          },
        },
        grid: {
          top: "0%",
          left: "0%",
          right: "0%",
          bottom: "0%",
        },
        legend: {
          show: true,
          bottom: 0,
          right: 0,
          itemGap: 18,
          itemWidth: 9,
          itemHeight: 9,
          orient: "vertical",
          icon: "circle",
          selectedMode: true,
          textStyle: {
            color: "#ffffff",
            fontSize: 12,
          }
        },
        toolbox: {
          show: false,
        },
        series: [
          {
            type: "pie",
            clockWise: false,
            radius: ["60%", "75%"],
            center: ["45%", "50%"],
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "outside",
                  color: "#ddd",
                  formatter: (item: any) => {
                    return `${item.name} ${item.value}个`;
                  }
                },
                labelLine: {
                  show: true,
                  color: "#00ffff",
                },
              },
            },
            data: (() => {
              const list = [] as any;
              const scaleData = [
                { name: "喷花", value: 6886, color: "#00cfff" },
                { name: "火箭", value: 2305, color: "#00ffff" },
                { name: "礼花", value: 3564, color: "#ffe000" }
              ];
              scaleData.forEach((item: any) => {
                list.push({
                  name: item.name,
                  value: item.value,
                  itemStyle: {
                    normal: {
                      borderWidth: 5,
                      shadowBlur: 20,
                      borderColor: item.color,
                      shadowColor: item.color,
                    },
                  },
                });
              });
              return list;
            })(),
          },
        ]
      },
      rightTopTable: {
        list: [
          { name: '原料1', num: 300 },
          { name: '原料2', num: 280 },
          { name: '原料3', num: 240 },
          { name: '原料4', num: 210 },
          { name: '原料5', num: 180 }
        ],
        loading: true
      },
      rightTwoTable: {
        list: [
          { name: '半成品1', num: 300 },
          { name: '半成品2', num: 280 },
          { name: '半成品3', num: 240 },
          { name: '半成品4', num: 210 },
          { name: '半成品5', num: 180 }
        ],
        loading: true
      },
      rightThreeTable: {
        list: [
          { name: '成品1', num: 300 },
          { name: '成品2', num: 280 },
          { name: '成品3', num: 240 },
          { name: '成品4', num: 210 },
          { name: '成品5', num: 180 }
        ],
        loading: true
      },
      rightFourTable: {
        list: [
          { name: '成品1', num: 300 },
          { name: '成品2', num: 280 },
          { name: '成品3', num: 240 },
          { name: '成品4', num: 210 },
          { name: '成品5', num: 180 }
        ],
        loading: true
      },
      rightMoreChart: {
        tooltip: {
          trigger: 'item'
        },
        series: [{
          type: 'graph',
          layout: 'force',
          force: {
            repulsion: 60,
            edgeLength: 0
          },
          roam: 'scale',
          label: {
            show: true,
          },
          data: [] as any[]
        }]
      }
    });

    onMounted(() => {
      nextTick(() => {
        delay(600).then(() => {
          data.rightTopTable.loading = false;
        });
        delay(800).then(() => {
          const arr = [
            '福气临门', '星光闪闪', '吉星高照', '龙腾虎跃', '满天花开', '福如东海',
            '寿比南山', '一飞冲天', '超级火箭', '冲天炮', '恭喜发财', '财源广进'
          ];
          const list = [] as any[];
          arr.forEach((item, index) => {
            list.push({
              name: item,
              value: index + 1 * 20,
              draggable: true,
              label: {
                color: randomColor(),
                fontSize: index * 0.5 + 12
              }
            });
          });
          data.rightMoreChart.series[0].data = list;
        });
        delay(1000).then(() => {
          data.rightTwoTable.loading = false;
          data.rightFourTable.loading = false;
        });
        delay(1200).then(() => {
          data.rightThreeTable.loading = false;
        });
      });
    });

    watch(() => props.showUI, (val) => {
      data.hiddenUI = val;
    });

    onUnmounted(() => {

    });

    return {
      ...toRefs(data),
      webToUeMessige
    };
  },
});
</script>

<style scoped lang="less">
.repertory {
  width: 100%;
  height: 100%;
  user-select: none;

  .ui_left,
  .ui_right {
    pointer-events: auto;
    width: 95%;
    height: calc(100% - 10px);
    padding: 5px 10px;

    .nape_content {
      width: 100%;
      padding-bottom: 15px;

      .content_title {
        width: 100%;
        height: 35px;
        background: url('../../assets/img/contentTitle.png') no-repeat center;
        background-size: 100% 100%;

        span {
          margin-left: 40px;
          color: white;
          font-size: 20px;
          font-weight: bold;
          line-height: 25px;
          background-image: -webkit-linear-gradient(top, rgb(238, 252, 255) 50%, #6ae4ff);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }

      .center_content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: calc(100% - 35px);
        margin-top: 5px;


        .table_box {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-direction: column;
          font-size: 14px;
          padding: 0 5px;

          .tableHead {
            width: 100%;
            height: 36px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            span {
              width: 25%;
              font-size: 16px;
              text-align: center;
              color: #bde5fe;
            }
          }

          .tableContent {
            width: 100%;
            height: calc(100% - 36px);
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-direction: column;
            overflow-y: auto;
            overflow-x: hidden;

            .tableItem {
              width: 100%;
              height: 30px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin: 3px 0;
              transform-origin: 0 100%;

              .textContent {
                overflow: hidden;
                width: 25%;
                line-height: 30px;
                height: 30px;

                span {
                  text-align: center;
                  display: inline-block;
                  width: 100%;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  white-space: nowrap;
                  transition: all 3s linear;
                  color: #6ae4ff;
                }
              }

              &:nth-child(odd) {
                background: rgba(255, 255, 255, 0.2);
              }

              &:hover {
                background: rgba(0, 174, 240, 0.6);

                .scrollText {
                  animation: scroll-left 3s linear infinite;
                  overflow: visible;
                }
              }

              @keyframes move_tableItem {
                0% {
                  transform: translateX(260px) skewX(-60deg);
                  opacity: 0;
                }

                100% {
                  transform: translateX(0px) skewX(0deg);
                  opacity: 1;
                }
              }

              @keyframes scroll-left {
                from {
                  transform: translateX(0);
                }

                to {
                  transform: translateX(-150%);
                }
              }
            }

            .active {
              background: rgba(0, 174, 240, 0.6);
            }
          }
        }

        .invest_box {
          width: 100%;
          height: 100%;
          color: #dae9ff;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;

          .invest_list_con {
            display: flex;
            align-items: center;
            height: 25%;
            width: 100%;

            .name {
              width: 20%;
              text-align: right;
            }

            .progress {
              height: 8px;
              width: 50%;
              background: rgba(158, 158, 158, 0.1);
              margin: 0 10px;

              div {
                height: 100%;
                border-radius: 2px;
              }
            }

            .value {
              width: 25%;
              text-align: right;
              overflow: hidden;
              white-space: nowrap;
            }
          }
        }
      }
    }
  }
  .ui_left{
    .nape_content {
      height: 25%;
    }
  }
  .ui_right{
    .nape_content {
      height: 20%;
    }
  }
}
</style>
